<template>
  <div class="page-gird-container">
    <i-crud
      ref="crud"
      :columns="columns"
      :data="data"
      :page-options="pageOptions"
      :fetch-data="fetchData"
      :options="options"
      :add-form-options="addFormOptions"
      :searchOptions="searchOptions"
    >
      <template v-slot:action="{ row, column, index }">
        <Button @click="handleShowViewDialog(row, column, index)">查看</Button>
      </template>
    </i-crud>
    <Modal v-model="modal" title="订单详情" width="1200" :footer-hide="true">
      <div class="modal-top">
        <DescriptionList>
          <Description term="订单编号：">
            {{ orderData.ordernum }}
          </Description>
          <Description term="订单类型：">
            {{ type }}
          </Description>
        </DescriptionList>
        <DescriptionList>
          <Description term="创建时间：">
            {{ orderData.create_time }}
          </Description>
          <Description term="支付时间：">
            {{ orderData.paytime }}
          </Description>
        </DescriptionList>
        <DescriptionList>
          <Description term="支付状态：">
            {{ status }}
          </Description>
        </DescriptionList>
      </div>
      <i-crud
        :columns="modalColumns"
        :data="modalData"
        :page-options="pageOptions1"
        :options="options1"
        :add-form-options="addFormOptions1"
        :toolbarOptions="toolbarOptions"
      ></i-crud>
    </Modal>
  </div>
</template>

<script>
    import { financialOrders, financialorderInfo } from "@/api/finance";
    import { mapState } from "vuex";
    import appMixins from "@/mixins/app";

    export default {
        name: "finance-orderManage",
        mixins: [appMixins],
        computed: {
            ...mapState("admin/finance_dict", ["orderStatus", "orderType", "products"]),
            ...mapState("admin/resource_dict", ["timeSlotDict"]),
            ...mapState("admin/icrud_dict", ["whetherDict"]),
            columns() {
                return [
                    {
                        title: "订单编号",
                        key: "ordernum",
                        type: "Input",
                        width: 0,
                    },
                    {
                        title: "产品名称",
                        key: "product",
                        render: (h, params) => {
                            let status = params.row.product;
                            if (status == "proxyIp") {
                                status = "代理IP";
                            }
                            return h("span", status);
                        },
                        width: 0,
                    },
                    {
                        title: "金额",
                        key: "money",
                        width: 0,
                    },
                    {
                        title: "创建时间",
                        key: "create_time",
                        sortable: true,
                        componentName: "DatePicker",
                        search: {
                            component: {
                                valueBinding: "date",
                                name: "DatePicker",
                                type: "daterange",
                            },
                        },
                        width: 0,
                    },
                    {
                        title: "状态",
                        key: "status",
                        type: "Select",
                        dict: {
                            data: this.orderStatus,
                        },
                        width: 0,
                    },
                    {
                        title: "来源/用途",
                        key: "type",
                        componentName: "Select",
                        dict: {
                            data: this.orderType,
                        },
                        width: 0,
                    },
                    {
                        title: "操作",
                        slot: "action",
                    },
                ];
            },
            modalColumns() {
                return [
                    {
                        title: "购买时长",
                        key: "period",
                        componentName: "Select",
                        dict: {
                            data: this.timeSlotDict,
                        },
                        width: 0,
                    },
                    {
                        title: "账号",
                        key: "username",
                        width: 0,
                    },
                    {
                        title: "节点名称",
                        key: "nodeName",
                        width: 0,
                    },
                    {
                        title: "项目",
                        key: "projectName",
                        width: 0,
                    },
                    {
                        title: "自动续费",
                        key: "autoRenew",
                        componentName: "Select",
                        dict: {
                            data: this.whetherDict,
                        },
                        width: 0,
                    },
                    {
                        title: "金额",
                        key: "amount",
                        width: 0,
                    },
                ];
            },
            type() {
                let str = ''
                if(this.orderData.type == 'Purchase') {
                    str = '购买'
                }
                if(this.orderData.type == 'Renewal') {
                    str = '续费'
                }
                if(this.orderData.type == 'Automatic renewal') {
                    str = '自动续费'
                }
                return str
            },
            status() {
                let str = ''
                if(this.orderData.status == 'Unpaid') {
                    str = '未支付'
                }
                if(this.orderData.status == 'Havepaid') {
                    str = '已支付'
                }
                if(this.orderData.status == 'Cancelled') {
                    str = '已取消'
                }
                return str
            }
        },
        data() {
            return {
                modal: false,
                orderData: {},
                pageOptions1: {
                    show: false,
                },
                pageOptions: {
                    total: 0,
                    pageSize: 20,
                    pageSizeOpts: [20, 50, 100, 200],
                },
                handleRowOptions: {
                    title: "操作",
                    align: "center",
                    view: {
                        show: true,
                        disabled: false,
                        ghost: true,
                        text: "查看",
                        order: 1,
                    },
                    edit: {
                        show: false,
                    },
                    remove: {
                        show: false,
                    },
                },
                data: [],
                modalData: [],
                addFormOptions: {
                    show: false,
                },
                addFormOptions1: {
                    show: false,
                },
                toolbarOptions: {
                    show: false
                },
                options: {
                    border: false, // 是否显示边框
                },
                options1: {
                    border: false, // 是否显示边框
                },
                searchOptions: {
                    labelWidth: 150,
                },
            };
        },
        methods: {
            fetchData({ currentPage, pageSize, sortColumn, sortType, search }) {
                return new Promise((resolve, reject) => {
                    const params = {
                        page: {
                            current: currentPage,
                            size: pageSize,
                        },
                        search,
                    };
                    if (search.date && search.date[0] !== "") {
                        search.date[0] = this.toDate(search.date[0]);
                        search.date[1] = this.toDate(search.date[1]);
                    }
                    if (sortColumn) {
                        params["sort"] = {
                            type: sortType,
                            column: sortColumn,
                        };
                    }
                    financialOrders(params)
                        .then((res) => {
                            this.data = res.list;
                            this.pageOptions.total = res.total;
                            resolve();
                        })
                        .catch((err) => {
                            reject(new Error(err));
                        });
                });
            },
            handleShowViewDialog(row, column, index) {
                financialorderInfo({
                    ordernum: row.ordernum,
                }).then((res) => {
                    this.orderData = res;
                    this.modalData = this.orderData.products;
                });
                this.modal = true;
            },
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  background-color: #fff;
}
.modal-top {
  background-color: #f5f7f9;
  padding: 10px;
  margin-bottom: 20px;
}
</style>
